<template>
  <div class="dayin">
    <el-button type="primary" @click="print()" class="dayin_btn"
      >打印预览</el-button
    >
    <h3 style="text-align: center;">{{ Infomation }}</h3>
    <div ref="print" id="printArea">
      <div class="wai" v-for="(item, index) in dayinlist" :key="index">
        <div class="nei">
           <table style="border-collapse: collapse" cellspacing="0">
             <tr>
               <td colspan="2">名称:<span>{{item.product.product_name}}</span></td>
             </tr>
             <tr>
               <td colspan="2">型号:<span>{{item.model_number.model_number}}</span></td>
             </tr>
             <tr>
               <td colspan="2">规格:<span>{{item.specification.specification}}</span></td>
             </tr>
             <tr>
               <td colspan="2">尺寸:<span>{{item.models_field.size}}</span></td>
             </tr>
             <tr>
               <td colspan="2">执行标准:<span>QB\T1952.1-2012</span></td>
             </tr>
             <tr>
               <td>检验员:
                <span v-for="ite,index in item.order_child" :key="index"  v-if="ite.job_type.job_type=='质检'">{{ite.employee?ite.employee.employee_name:''}}</span>
              </td>
               <td rowspan="2" class="er_td">
                 <vue-qr  :text='"{\"order_id\":"+item.id+"}"' :size="35" class="er_ma"></vue-qr>
               </td>
             </tr>
             <tr>
               <td>等级:<span>一等品</span></td>
             </tr>
             <tr>
               <td colspan="2">单号:<span>{{item.order_number}}</span></td>
             </tr>
             <tr>
               <td colspan="2">检验日期:<span v-for="ite,index in item.order_child" :key="index" v-if="ite.job_type.job_type=='质检'">{{ite.submit_time}}</span></td>
             </tr>
             <tr>
               <td colspan="2">全国统一零售价:<span>{{Number( item.receivables) * 4}}</span></td>
             </tr>
           </table>
        </div>
        <div style="page-break-after: always"  v-if="index<(dayinlist.length-1)"></div>
        </div>
      </div>
  </div>
</template>

<script>
import vueQr from "vue-qr";
export default {
  components: {
    vueQr,
  },
  data() {
    return {
      dayinlist: [],
      Infomation: "",
    };
  },
  mounted() {
    this.dayinlist = JSON.parse(this.$route.query.data);
    this.Infomation = this.$store.getters.Infomation.company_name;
    console.log(this.dayinlist);
  },
  methods: {
    formatterTime(data) {
      return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data).splice(0, 11)[0];
    },
    print() {
      this.$print(this.$refs.print);
    },
  },
};
</script>
<style scoped>
.dayin {
  box-sizing: border-box;
}
#printArea {
  width:50mm;
  height:60mm;
  position: relative;
  margin: 0 auto;
}
.wai {
  width:100%;
  height:100%;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}
.nei {
  width:50mm;
  height:60mm;
  padding:1mm;
  box-sizing: border-box;
}
#printArea table{
  width: 100%;
  height: 100%;
}
#printArea table tr td{
  font-size: 12px;
  transform: scale(0.9, 0.9);
  *font-size: 11px;
  line-height: 10px;
}
#printArea table tr{
 
}
#printArea table tr td span{
  margin-left:10px;
}
.er_td{
  position:absolute;
  left:30mm;
}

.er_ma{
  margin: 0 auto;
}

@media print {
  .dayin {
  box-sizing: border-box;
}
#printArea {
  width:100%;
  margin: 0 auto;
}
.wai {
  width:100%;
  height:100%;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}
.nei {
  width:50mm;
  height:60mm;
  padding:1mm;
  box-sizing: border-box;
}
#printArea table{
  width: 100%;
  height: 100%;
}
#printArea table tr{
  position: relative;
}
#printArea table tr td{
  font-size: 12px;
  transform: scale(0.9, 0.9);
  *font-size: 11px;
}
#printArea table tr td span{
  margin-left:10px;
}
.er_td{
  position:absolute;
  left:30mm;
}

.er_ma{
  margin: 0 auto;
}
 

}
@page {
  size: auto; /* auto is the initial value */
  margin: 3mm; /* this affects the margin in the printer settings */
}
.procedure {
  word-wrap: break-word;
}
</style>
